import React, { Component } from 'react';
import { connect } from 'dva';
// import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import { Divider, Form, Row, Col, Table, message, Input, Select, Switch, Modal, Radio, Button,DatePicker } from 'antd';
import moment from 'moment';
// import Login from '@/components/Login';
import styles from './Account.less';

const { Option } = Select;
const { confirm } = Modal;

@Form.create()
@connect(({ account, loading }) => ({
  account,
  loading: loading.models.order,
}))
class OrderLookPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 1,
      pageSize: 10,
      employee: '',
      employeeName: '',
      closure: null,
      resetVisible: false,
      Radiovalue: 1,
      password: '',
      personList: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
      ],
      addVisible:false,
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'account/fetchQueryTable',
    });

  }

  setEmployee = (event) => {
    this.setState({
      employee: event,
    }, () => {
      if (this.state.closure) {
        clearTimeout(this.state.closure);
      }
      this.setState({
        closure: setTimeout(() => {
          this.query();
        }, 800),
      });
    });
  };

  setEmployeeName = (event) => {
    this.setState({
      employeeName: event,
    }, () => {
      if (this.state.closure) {
        clearTimeout(this.state.closure);
      }
      this.setState({
        closure: setTimeout(() => {
          this.query();
        }, 800),
      });
    });
  };

  query = () => {
    const { employee, employeeName, current, pageSize } = this.state;
    const { dispatch } = this.props;
    const params = {
      current,
      pageSize,
      employee,
      employeeName,
    };
    dispatch({
      type: 'account/fetchQueryTable',
      payload: params,
    });
  };

  // 分页
  handleTableChange = (current, pageSize) => {
    this.setState(
      {
        current,
        pageSize,
      },
      () => {
        this.query();
      },
    );
  };

  onChangeStatus = () => {

  };

  // 删除
  showDeleteConfirm = record => {
    const _this = this;
    confirm({
      title: '是否确认删除?',
      okText: '确认',
      okType: 'primary',
      cancelText: '取消',
      onOk() {
        _this.handleConfirm(record);
      },
    });
  };

  handleConfirm = record => {
    const { dispatch } = this.props;
    dispatch({
      type: 'account/handleDelate',
      payload: { id: record.id },
    });
  };

  handleReset = (record) => {
    this.setState({
      resetVisible: true,
    });
  };

  RadioonChange = (e) => {
    this.setState({ Radiovalue: e.target.value });
  };

  inputonchange = (e) => {
    this.setState({ password: e.target.value });
  };

  handleVisibleOk = () => {
    this.setState({
      resetVisible: false,
    });
  };

  handleAddVisibleOk = () => {
    const { form } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      console.log('vv',values)
      if (err) return;
    });
    this.setState({
      addVisible: false,
    });
  };

  handleVisibleCancel = () => {
    this.setState({
      resetVisible: false,
    });
  };

  handleAddVisibleCancel = () => {
    this.setState({
      addVisible: false,
    });
  };

  handleAdd = () => {
    this.setState({
      addVisible:true,
    })
  }

  render() {
    const { account: { pageInfo }, loading,form:{getFieldDecorator} } = this.props;
    const { employee, personList, current, pageSize, resetVisible, Radiovalue,addVisible } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
        md: { span: 16 },
      },
    };
    const columns = [
      {
        title: '序号',
        dataIndex: 'key',
        width: 100,
        key: 'key',
        render: (text, record, index) => {
          return <span>{index + 1}</span>;
        },
      }, {
        title: '员工姓名',
        dataIndex: 'empRealName',
        align: 'left',
      }, {
        title: '手机号',
        dataIndex: 'tel',
        align: 'left',
      }, {
        title: '账号名称',
        dataIndex: 'accountName',
        sorter: true,
        align: 'left',
      }, {
        title: '创建时间',
        dataIndex: 'gmtCreate',
        sorter: true,
        render: (text) => {
          return moment(text).format('YYYY-MM-DD');
        },
      }, {
        title: '创建人',
        dataIndex: 'createUserName',
        align: 'left',
      }, {
        title: '能否登录',
        sorter: true,
        dataIndex: 'stauts',
        render: (text, record) => <Switch defaultChecked={record.swich} onChange={() => this.onChangeStatus(record)}/>,
      },
      {
        title: '操作',
        dataIndex: 'operation',
        render:
          (text, record) => {
            return <div>
              <a onClick={() => this.showDeleteConfirm(record)}>删除</a>
              <Divider type="vertical"/>
              <a onClick={() => this.handleReset(record)}>重置密码</a>
            </div>;
          },
      },
    ];
    return (
      <div className={styles.main}>
        <div className={styles.farmingSearch}>
          <Row style={{ paddingLeft: '20px' }}>
            <Col span={6} className={styles.title}>
              账号配置
            </Col>
            <Col span={6}>
              <span>员工姓名</span>
              <Select
                value={employee}
                onChange={this.setEmployee}
                showSearch
                placeholder="请选择员工名"
                optionFilterProp="children"
                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
              >
                {(personList || []).map((item) => {
                  return <Option key={item.id} value={item.name}>{item.name}</Option>;
                })}
              </Select>
            </Col>
            <Col span={6}>
              <span>账户名称</span>
              <Input placeholder="请输入账户名称" onChange={this.setEmployeeName}/>
            </Col>
            <Col span={6}>
              <span>手机号</span>
              <Input placeholder="请输入手机号" onChange={this.setEmployeeName}/>
            </Col>
          </Row>
        </div>
        <Row style={{ textAlign:'right',marginBottom:'20px' }}>
          <Button type="primary" onClick={this.handleAdd}>新增</Button>
        </Row>
        <div>
          <Table
            loading={loading}
            rowKey={record => record.id}
            columns={columns}
            dataSource={pageInfo && pageInfo.list}
            pagination={{
              current,
              pageSize,
              defaultCurrent: current,
              defaultPageSize: pageSize,
              total: pageInfo && pageInfo.total,
              onChange: this.handleTableChange,
            }}
          />
        </div>
        {
          resetVisible && <Modal
            distoryOnClose
            width="30%"
            title="重置密码"
            visible={resetVisible}
            okText="确认"
            cancelText="取消"
            onOk={this.handleVisibleOk}
            onCancel={this.handleVisibleCancel}
          >
            <Radio.Group onChange={this.RadioonChange.bind(this)} value={Radiovalue}>
              <Radio value={1}>默认密码</Radio>
              <Radio value={2}>自定义密码</Radio>
            </Radio.Group>
            {
              Radiovalue === 2 ?
                <Input
                  style={{ width: 200, marginLeft: 130, marginTop: 10 }}
                  onChange={this.inputonchange}
                  placeholder="请输入密码"
                /> :
                <i>默认密码为：账号名@手机号后4位</i>
            }
          </Modal>
        }
        {
          addVisible && <Modal
            distoryOnClose
            width="40%"
            title="添加用户"
            visible={addVisible}
            okText="确认"
            cancelText="取消"
            onOk={this.handleAddVisibleOk}
            onCancel={this.handleAddVisibleCancel}
          >
            <Form>
              <Row>
                <Col span={24}>
                  <Form.Item
                    label='账号名称'
                    {...formItemLayout}
                  >
                    {getFieldDecorator('accountName',{
                      initialValue:'',
                      rules: [
                        {
                          required: true,
                          message: "请输入",
                        },
                      ],
                    })(<Input placeholder='请输入' />)}
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    label='密码'
                    {...formItemLayout}
                  >
                    {getFieldDecorator('password',{
                      initialValue:'',
                      rules: [
                        {
                          required: true,
                          message: "请输入",
                        },
                      ],
                    })(<Input placeholder='请输入' />)}
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    label='姓名'
                    {...formItemLayout}
                  >
                    {getFieldDecorator('empRealName',{
                      initialValue:'',
                      rules: [
                        {
                          required: true,
                          message: "请输入",
                        },
                      ],
                    })(<Input placeholder='请输入' />)}
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    label='生日'
                    {...formItemLayout}
                  >
                    {getFieldDecorator('birth',{
                      initialValue:null,
                      rules: [
                        {
                          required: true,
                          message: "请选择",
                        },
                      ],
                    })(<DatePicker style={{width:'100%'}} format="YYYY-MM-DD" placeholder='请选择' />)}
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    label='手机号'
                    {...formItemLayout}
                  >
                    {getFieldDecorator('tel',{
                      initialValue:'',
                      rules: [
                        {
                          required: true,
                          message: "请输入",
                        },
                        { pattern: /^1(3|4|5|7|8)\d{9}$/, message: '请输入正确的手机号' },
                      ],
                    })(<Input placeholder='请输入' />)}
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item {...formItemLayout} label="性别">
                    {getFieldDecorator('sex', {
                      initialValue:1,
                      rules: [{ required: false, message: "请选择" }],
                    })
                    (
                      <Radio.Group>
                        <Radio value={1}>男</Radio>
                        <Radio value={2}>女</Radio>
                      </Radio.Group>
                    )
                    }
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item {...formItemLayout} label="是否激活">
                    {getFieldDecorator('jihuo', {
                      initialValue:1,
                      rules: [{ required: false, message: "请选择" }],
                    })
                    (
                      <Radio.Group>
                        <Radio value={1}>是</Radio>
                        <Radio value={2}>否</Radio>
                      </Radio.Group>
                    )
                    }
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Modal>
        }
      </div>
    );
  }
}

export default OrderLookPage;
;
